<template>
  <div class="main-container" style="height: 100%; background: white">
    <a-tabs   :lazy-load="true" type="card" justify @change="tabsChange" :default-active-key="pageData.tableIndex">
      <a-tab-pane title="创建申购单" key="1" v-if="permissionStore.hasPermisson('sgd.cjsgd')">
        <div style="height: 100%">
          <CreateOrder></CreateOrder>
        </div>
      </a-tab-pane>

      <a-tab-pane title="申购单审核" key="2" v-if="permissionStore.hasPermisson('sgd.sgdsh')">
        <div style="height: 100%">
          <ReviewForm></ReviewForm>
        </div>
      </a-tab-pane>
      <a-tab-pane title="申购单反审" key="3" v-if="permissionStore.hasPermisson('sgd.sgdfs')">
        <div style="height: 100%">
          <RequestFormVue></RequestFormVue>
        </div>
      </a-tab-pane>
      <!-- <a-tab-pane title="创建采购单" key="4" v-if="permissionStore.hasPermisson('cgd.cjcgd')">
        <div style="height: 100%">
          <OrderOfPurchase></OrderOfPurchase>
        </div>
      </a-tab-pane>

      <a-tab-pane title="采购单审核" key="5" v-if="permissionStore.hasPermisson('cgd.cgdsh')">
        <div style="height: 100%">
          <PurchaseInquiry></PurchaseInquiry>
        </div>
      </a-tab-pane>
      <a-tab-pane title="采购单反审" key="6" v-if="permissionStore.hasPermisson('cgd.cgdfs')">
        <div style="height: 100%">
          <PurchaseReview></PurchaseReview>
        </div>
      </a-tab-pane> -->
    </a-tabs>
  </div>
</template>

<script lang="ts">
  import { defineComponent, reactive, ref, getCurrentInstance } from 'vue'
  import CreateOrder from '@/components/pcsingmagent/purchase/CreateOrder.vue'
  import ReviewForm from '@/components/pcsingmagent/purchase/ReviewForm.vue'
  import RequestFormVue from '@/components/pcsingmagent/purchase/RequestForm.vue'
  // import OrderOfPurchase from '@/components/pcsingmagent/purchase/OrderOfPurchase.vue'
  // import PurchaseReview from '@/components/pcsingmagent/purchase/PurchaseReview.vue'
  // import PurchaseInquiry from '@/components/pcsingmagent/purchase/PurchaseInquiry.vue'
  import usePermission from '@/store/modules/permission'
  import emitter from '@/hooks/useEventBus'
  export default defineComponent({
    name: 'Purchase',
    components: {
      CreateOrder,
      ReviewForm,
      RequestFormVue,
      // OrderOfPurchase,
      // PurchaseReview,
      // PurchaseInquiry,
    },
    setup() {
      const { proxy } = getCurrentInstance()
      const tabValue = ref<any>(proxy.$route.query.key)
      const pageData = reactive({
        tableIndex: tabValue.value,
      })

      const tabsChange = (e: string | number) => {
        emitter.emit('window-change')
        if (e === '1') {
          emitter.emit('CreateOrder')
        } else if (e === '2') {
          emitter.emit('ReviewForm')
        } else if (e === '3') {
          emitter.emit('RequestFormVue')
        } else if (e === '4') {
          emitter.emit('OrderOfPurchase')
        } else if (e === '5') {
          emitter.emit('PurchaseInquiry')
        } else if (e === '4') {
          emitter.emit('PurchaseReview')
        }
      }
      const permissionStore = usePermission()
      return {
        pageData,
        tabsChange,
        permissionStore,
      }
    },
  })
</script>
<style scoped>
  :deep(.ag-cell) {
    border-right: 1px solid #dde2eb;
  }

  :deep(.ag-header-cell) {
    border-right: 1px solid #dde2eb;
  }
  :deep(.ag-cell-value) {
    user-select: initial;
    -moz-user-select: text;
    -ms-user-select: text;
    -webkit-user-select: text;
  }
</style>
